<template>
  <c-dialog ref="dialog" :data="selData" single warn-text="软装陈列" title="软装陈列">
    <c-list ref="form" :model="formData" :rules="formRules" label-width="100px">
      <c-list-item label="软装陈列任务号" :value="detail.softwearTaskCode" />
      <c-list-item label="所属门店" :value="detail.shopName" />
      <c-list-item label="装修任务号" :value="detail.decorationTaskCode" />
      <c-list-item prop="displayStartTime" label="陈列开始时间">
        <el-date-picker
          v-model="formData.displayStartTime"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="选择日期"
          clearable
        />
      </c-list-item>
      <c-list-item>
        <div class="btn-container">
          <c-button @click="cancelHandle">取消</c-button>
          <c-button type="primary" @click="confirmHandle">确认</c-button>
        </div>
      </c-list-item>
    </c-list>
  </c-dialog>
</template>
<script>
import { postDisplay } from '@/api/softDecorate'
export default {
  name: 'Display',
  props: {
    selData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {
        displayStartTime: ''
      },
      formRules: {
        displayStartTime: [{ required: true, message: '请选择时间', trigger: 'change' }]
      }
    }
  },
  computed: {
    detail() {
      return this.selData.length > 0 ? this.selData[0] : {}
    }
  },
  methods: {
    confirmHandle() {
      this.$refs.form.validate().then(() => {
        const data = {
          id: this.detail.id,
          displayStartTime: this.formData.displayStartTime
        }
        postDisplay(data).then(res => {
          this.$message.success('操作成功！')
          this.$emit('on-success')
          this.$refs.dialog.visible = false
        })
      })
    },
    cancelHandle() {
      this.$refs.dialog.visible = false
    }
  }
}
</script>
